<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2024-03-05 15:39:13
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-03-14 10:01:06
 * @FilePath: /hr_new_vue3/src/views/Management/Organization/OrganizationManagement/Structure/MoveMergeHistory/PersonChange/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 组织人事异动 -->
<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew title="人事异动" showBack />
    </template>
    <a-tag
      closable
      color="gold"
      size="large"
      style="width: 100%; border: 1px solid gold"
    >
      <template #icon>
        <icon-info-circle />
      </template>
      <span style="width: 100%"
        >1、请选择需要合并的目标，原组织下的所有员工都将并入到新的组织，员工岗位按企业实际情况处理。</span
      >
    </a-tag>
    <ConditionBox :margin-bottom="20" :margin-top="20">
      <template #left>
        <a-space>
          <template #split>
            <a-divider direction="vertical" />
          </template>
          <span>原组织名称：{{ data.reMergeOrganizationName }}</span>
          <span
            >原组织员工人数：{{
              data.reMergeOrganizationNumber
                ? data.reMergeOrganizationNumber
                : 0
            }}
          </span>
        </a-space>
      </template>
      <template #right v-if="!isChange">
        <a-space>
          <span>批量待岗： <a-switch @change="changeBatch" /></span>
        </a-space>
      </template>
    </ConditionBox>
    <a-table :data="data?.userModel" stripe column-resizable row-key="id">
      <template #columns>
        <a-table-column :width="80" align="center">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column
          :width="200"
          data-index="userName"
          title="员工名称"
          align="center"
        />
        <a-table-column
          :width="200"
          data-index="reDepartmentName"
          title="原组织"
          align="center"
        />
        <a-table-column
          :width="200"
          data-index="rePositionName"
          title="原职位"
          align="center"
        />
        <a-table-column
          :width="200"
          data-index="mobile"
          title="新职位"
          align="center"
        >
          <template #cell="{ record }">
            <a-select
              allow-clear
              :disabled="record.state !== 1 || record.isWaitJob === 1"
              v-model="record.newPositionId"
            >
              <a-option
                v-for="item in positionList"
                :key="item.id"
                :value="item.id"
                >{{ item.name }}</a-option
              >
            </a-select>
          </template>
        </a-table-column>
        <a-table-column
          :width="200"
          data-index="mobile"
          title="选择待岗"
          align="center"
        >
          <template #cell="{ record }">
            <a-switch
              :disabled="record.state !== 1"
              v-model="record.isWaitJob"
              :checked-value="1"
              :unchecked-value="2"
              @change="(val, record1) => changeWaitJob(val, record)"
            />
          </template>
        </a-table-column>
      </template>
    </a-table>

    <section class="approve">
      <div class="title-box">
        <div class="title">
          <div
            :style="{
              marginLeft: '25px'
            }"
          >
            异动审批
          </div>
        </div>
      </div>
    </section>
    <footer>
      <a-space>
        <a-button
          style="
            margin-right: 20px;
            border: 1px rgba(242, 242, 242, 1) solid;
            background-color: #fff;
          "
          @click="$router.go(-1)"
          class="btn"
          >取消</a-button
        >
        <a-button type="primary" class="btn" @click="save" v-if="!isChange"
          >确认</a-button
        >
      </a-space>
    </footer>
  </ContentCard>
</template>

<script lang="tsx" setup>
import { Message } from '@arco-design/web-vue';
import {
  GetOrganizationPersonChangeDetail,
  PutOrganizationPersonChange
} from '@/apis/management/organization/organizationManagement';
import { GetPositionListByDepartmentId } from '@/apis/management/organization/positionManagement';
import { cloneDeep } from 'lodash';

const router = useRouter();
const route = useRoute();

const type = +route.params.type; // 1 移动 2 合并
const id = +route.params.id;

const data = ref({}); // 储存数据
const positionList = ref([]);
let isChange = ref(false); // 是否更改过异动
const getData = async (pageData?: any) => {
  try {
    data.value = await GetOrganizationPersonChangeDetail({ id });
    positionList.value = await GetPositionListByDepartmentId({
      id: data.value.mergeOrganizationId
    });
    data.value.userModel = data.value?.userModel.map((el: any) => {
      if (el.state === 2) isChange.value = true;
      return {
        ...el,
        newPositionId: el.state === 1 ? undefined : el.newPositionId,
        newPositionName: el.state === 1 ? undefined : el.newPositionName,
        isWaitJob: el.state === 1 ? 2 : el.newPositionId ? 2 : 1
      };
    });
    console.log('====================================');
    console.log(data.value);
    console.log('====================================');
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();

let tableRef = ref();
// 获取表格数据
const getTableData = async (pageData?: any) => {
  try {
    // const res = await GetWaitSignedContractList({
    //   ...pageData
    // });
    // return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 批量待岗
const changeBatch = (val: boolean) => {
  if (val) {
    data.value?.userModel.forEach((el: any) => {
      el.isWaitJob = 1;
      el.newPositionId = undefined;
    });
  } else {
    data.value?.userModel.forEach((el: any) => {
      el.isWaitJob = 2;
    });
  }
};

// 修改单个待岗
const changeWaitJob = (val, record) => {
  if (val === 1) {
    record.newPositionId = undefined;
  }
};

const save = async () => {
  try {
    if (
      data.value?.userModel.findIndex(
        (el: any) => el.newPositionId === undefined && el.isWaitJob === 2
      ) !== -1
    ) {
      Message.error('不待岗的人员必须选择岗位！');
      return;
    }
    let organizationalPersonnelChanges = cloneDeep(data.value?.userModel);
    organizationalPersonnelChanges = organizationalPersonnelChanges.map(
      (el: any) => {
        if (el.newPositionId === undefined) {
          el.newPositionId = 0;
          el.newPositionName = '待岗';
        } else {
          el.newPositionName = positionList.value.find(
            (item: any) => item.id === el.newPositionId
          )?.name;
        }
        return el;
      }
    );
    await PutOrganizationPersonChange({
      organizationalPersonnelChanges
    });
    console.log('====================================');
    console.log(organizationalPersonnelChanges);
    console.log('====================================');
  } catch (error: unknown) {
    console.log(error);
  }
};

// 刷新表格数据
const refresh = () => {
  tableRef.value.loadData();
};
</script>

<style scoped lang="less">
.approve {
  margin-top: 20px;
  .title-box {
    position: relative;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 36px;
      border-radius: 4px;
      font-weight: 700;
      margin-bottom: 10px;
      background: #edeffd;
    }
  }

  .title-box::before {
    position: absolute;
    // top: 33px;
    left: 10px;
    display: inline-block;
    height: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    margin-right: 20px;
    border-radius: 2px;
    // transform: translateY(-50%);
    content: '';
    background-color: #165dff;
  }
}
footer {
  height: 60px;
  width: calc(100% - 100px);
  background-color: #fff;
  box-shadow: 1px -1px 10px 0 #cacaca;
  position: fixed;
  bottom: 0;
  left: 10%;
  display: flex;
  justify-content: center;
  align-items: center;

  .btn {
    width: 120px;
    height: 40px;
    border-radius: 5px;
  }
}

// 垂直滚动条统一往外
:deep(.arco-scrollbar-track-direction-vertical) {
  right: -15px;
}
// 水平滚动条统一往外
:deep(.arco-scrollbar-track-direction-horizontal) {
  bottom: -15px;
}

:deep(.arco-table-td) {
  height: 40px;
}

:deep(.arco-table-th) {
  height: 45px;
  font-weight: 700;
}
</style>
